<template>
  <div class="record">
    <gltitle
      :titleSize="titleSize"
      :is_mt="is_mt"
      v-if="!$store.state.isApp"
    ></gltitle>
    <van-list
      v-model="loading"
      :finished="finished"
      :loading-text="$t('load.loading')"
      @load="onLoad"
      class="recordlist"
      :style="{ paddingTop: !$store.state.isApp ? '1.18rem' : '.2rem' }"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        style="padding: 0.24rem 0.2rem"
        @click="handlerInfo(item.id,item.type)"
      >
        <div class="record-item">
          <div class="db">
            <div class="record-item-left flex">
              <div class="item-name">{{ item.userName }}</div>
              <div class="item-time">{{ item.date }}</div>
            </div>
            <div class="record-item-right">
              <div class="item-tips"><span v-if="item.type==1">{{$t('bargain.obtained')}}</span><span v-else>{{$t('bargain.amountcut')}}</span></div>
              <div class="item-money">
                <span v-if="item.type==1">+</span><span v-else>-</span>{{ item.quotaAmount }} <span>USDT</span>
              </div>
            </div>
            <div class="record-icon">
              <img src="../../assets/images/lefticon.png" alt="" />
            </div>
          </div>
        </div>
      </van-cell>
      <div class="nulldata" v-if="showNull">
        <img src="../../assets/images/none2.png" alt="" />
        <p>{{$t('toast.nulldata')}}</p>
      </div>
    </van-list>
    <div class="invite" @click="$router.go(-1)">{{$t('bargain.invite')}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleSize: this.$t("title.inviterecord"),
      is_mt: true,
      list: [],
      loading: false,
      finished: false,
      page: 1,
      totals: 0,
      showNull: false,
    };
  },
  methods: {
    handlerInfo(id,type) {
      this.$router.push("/inviteinfo?id=" + id+'&type='+type);
    },
    onLoad() {
      setTimeout(() => {
        //记录
        this.$post(this.URL.bargain.inviterecord, {
          pageSize: 10,
          page: this.page,
          bargainCode: this.bargainCode,
        }).then((res) => {
          if (res.code == 0) {
            const { page, list } = res.data;
            this.totals = page.count;
            if (this.page == 1 && list == "") {
              this.showNull = true;
            }
            if (this.page == 1) {
              this.list = list;
            } else {
              this.list = this.list.concat(list);
            }
            this.page++;
            this.loading = false;
            if (this.list.length >= this.totals) {
              this.finished = true;
            }
          } else {
            this.$toast(res.message);
          }
        });
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.record {
  .van-cell {
    &:first-child {
      border-top-left-radius: 0.12rem;
      border-top-right-radius: 0.12rem;
    }
    &:last-child {
      border-bottom-left-radius: 0.12rem;
      border-bottom-right-radius: 0.12rem;
    }
  }
  .recordlist {
    margin: 0 0.2rem 1.5rem;
    border-radius: .12rem;
    overflow: hidden;
    .nulldata {
      font-size: 0.28rem;
      color: #bbbbbb;
      text-align: center;
      img {
        width: 3.29rem;
        margin: 4.02rem 0 0.39rem;
      }
    }
    .record-item {
      .db {
        line-height: .4rem;

        .record-item-left {
          font-size: 0.26rem;
          color: #222;
          .item-time {
            font-size: 0.22rem;
            color: #999;
          }
        }
        .record-item-right {
          text-align: right;
          font-size: 0.24rem;
          color: #999;
          .item-money {
            font-size: 0.28rem;
            color: #f53831;
            span {
              font-size: 0.2rem;
            }
          }
        }
        .record-icon {
          margin-left: .18rem;
          img {
            width: 0.13rem;
            vertical-align: middle;
          }
        }
      }
      .nullrecord {
        padding: 0.5rem 0;
        text-align: center;
      }
    }
  }
  .invite{
    position: fixed;
    bottom: 0.6rem;
    left: 0.24rem;
    width: 7.02rem;
    height: .88rem;
    font-size: .32rem;
    color: #fff;
    line-height: .88rem;
    background: linear-gradient(-90deg,#053ac2 0%, #2295ed 100%);
    border-radius: .16rem;
    text-align: center;
  }
}
</style>
